<template>
  <div style="margin-left: 10px">
    <h2 v-if="addFlag">添加课程</h2>
    <h2 v-else>编辑课程</h2>
    <el-form style="margin-left: 20px" ref="form" :model="form">
      <el-form-item label="课程名称">
        <el-input v-model="form.name" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item v-if="flag != 1" label="课程时长：分钟">
        <el-input-number
          v-model="form.duration"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="课程描述">
        <el-input v-model="form.description" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="课程开始时间">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="选择开始日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="课程结束时间">
        <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="选择结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item v-if="flag != 1" label="及格分数">
        <el-input-number
          :min="1"
          v-model="form.passedScore"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-if="flag != 1" label="考试次数">
        <el-input-number
          :min="1"
          v-model="form.canTestCount"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="课程封面">
        <el-upload
          :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :disabled="disabled"
        >
          <el-button size="small" type="primary" :disabled="disabled"
            >点击上传</el-button
          >
        </el-upload>
        <!-- 上传成功后，显示封面 -->
        <img style="width: 50%" :src="imageUrl" alt="" v-if="imageUrl != ''" />
      </el-form-item>
      <el-form-item v-if="flag != 1 && !addFlag" label="相关课件">
        <el-select
          v-model="form.ppts"
          placeholder="请选择相关课件"
          multiple
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="item in allPpts"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="flag != 1 && !addFlag" label="相关视频">
        <el-select
          v-model="form.videos"
          placeholder="请选择相关视频"
          multiple
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="item in allVideo"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="flag != 1 && !addFlag" label="相关文档">
        <el-select
          v-model="form.words"
          placeholder="请选择相关文档"
          multiple
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="item in words"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="相关学员">
        <el-select
          v-model="form.students"
          placeholder="请选择相关学员"
          multiple
          filterable
          value-key="account"
          :disabled="disabled"
        >
          <el-option
            v-for="item in allStudents"
            :key="item.account"
            :label="item.name"
            :value="item.account"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="disabled">取 消</el-button>
      <el-button type="primary" @click="handlerSubmit" :disabled="disabled"
        >确 定</el-button
      >
    </span>
  </div>
</template>

<script>
/**
 * 旧的user和subject绑定的数据
 */
let oldStudents = [];
import subjectApi from "@/api/subject/index";
import pptApi from "@/api/subject/ppt";
import videoApi from "@/api/video/index";
import host from "@/utils/host";
import { getAllStudents } from "@/api/user";
import wordApi from "@/api/word/index";
export default {
  data() {
    return {
      form: {
        name: "",
        duration: 0,
        description: "",
        parentId: null,
        id: null,
        cover: "",
        ppts: [],
        videos: [],
        passedScore: 0,
        canTestCount: 0,
        students: [],
        startTime: "",
        endTime: "",
        words: [],
      },
      allPpts: [],
      allVideo: [],
      url: "",
      imageUrl: "",
      addFlag: true,
      flag: 1,
      allStudents: [],
      disabled: false,
      words: [],
    };
  },
  methods: {
    handleAvatarSuccess(data) {
      if (data.code == 20000) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.imageUrl = data.data.url;
        this.form.cover = data.data.cover;
      } else {
        this.$message({
          message: `${data.message}`,
          type: "error",
        });
      }
    },
    handlerSubmit() {
      //this.form.cover = this.imageUrl;
      if (!this.addFlag) {
        subjectApi.update(this.form, oldStudents).then((res) => {
          this.$message({
            message: "更新成功",
            type: "success",
          });
        });
      } else {
        // Create a copy of the form data to modify before sending
        const formData = { ...this.form };
        // Ensure arrays are stringified consistently
        formData.ppts = JSON.stringify(formData.ppts);
        formData.videos = JSON.stringify(formData.videos);
        formData.words = JSON.stringify(formData.words);

        subjectApi.save(formData).then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        });
      }
      this.$router.push("/education/index");
    },
  },

  created: async function () {
    this.disabled = this.$route.query.disabled == 1 ? true : false;
    this.url =
      "http://" +
      host +
      ":9080/elearning/subject/upload/" +
      this.$route.query.id;
    const id = this.$route.query.id;
    //根据id获取相关question
    this.flag = this.$route.query.flag;

    if (id == -1 || !id) {
      this.addFlag = true;
    } else {
      this.addFlag = false;
      const res4 = await subjectApi.getById(id);
      this.form.name = res4.data.name;
      this.form.parentId = res4.data.parentId;
      this.form.description = res4.data.description;
      this.form.id = res4.data.id;
      this.form.duration = res4.data.duration;
      this.form.ppts = JSON.parse(res4.data.ppts);
      this.form.videos = JSON.parse(res4.data.videos);
      this.imageUrl = res4.data.imageUrl;
      this.form.cover = res4.data.cover;
      this.form.passedScore = res4.data.passedScore;
      this.form.canTestCount = res4.data.canTestCount;
      this.form.startTime = res4.data.startTime;
      this.form.endTime = res4.data.endTime;
      this.form.words = JSON.parse(res4.data.words);
      const res5 = await subjectApi.getUserAccountBySubjectId(id);
      this.form.students = res5.data;
      oldStudents = res5.data;
    }

    const res2 = await getAllStudents();
    this.allStudents = res2.data;
    if (!this.addFlag && this.flag != 1) {
      const res1 = await videoApi.getAll();
      this.allVideo = res1.data;
      const res3 = await pptApi.getAll();
      this.allPpts = res3.data;
      //获取所有words
      const res4 = await wordApi.getAll();
      this.words = res4.data;
    }
  },
};
</script>

<style></style>
